<template>
    <div id="jx-contain">
        <div class="jx-mainSection fl" >
            <div class="jx-course-name-detail">
                <div class="jx-course-name">
                    {{ CourseInfoData.name }}
                    <div class="fr jx-course-title" @click="CourseManage" v-if="(roles == 'TEACHER' || roles == 'MARKET_TEACHER' || roles == 'UNIVERSITY_TEACHER') && userStatus != 'NOT_CREATE_CLASS'"><i class="iconfont icon-guanli2" ></i>课程管理</div>
                </div>
                <div class="jx-course-content" v-text="CourseInfoData.introduction"></div>
                <div class="jx-course-look" @click="lookOutline" v-if="CourseInfoData.courseOutline"><i class="iconfont icon-zujiandagang-"></i>查看大纲</div>
                <!-- /Teaching/MyCourses/CourseOutline -->
            </div>
            <!-- 切换-->
            <div class="tab">
                <span class="category" @click="tab(index)" :class="{ actives : n == index }" v-for="(item, index) in tabs" :key="index">{{item.title}}</span>
            </div>
            <div v-if="n == 0">
                <el-collapse  v-model="activeName" accordion class="jx-course-collapse" v-if="isLearnContentFlag" @change="handleChange">
                <div v-for="(item, index) in CourseChapterListData" :key="index" :id="'item'+item.id" class="collapseTemplate"  >
                    <el-collapse-item  :name="index"  v-if="item.levels == 3" >
                        <template slot="title" >
                            <div style="padding-bottom:10px;">
                                <div class="jx-title-box">
                                    <div class="fl jx-blueStreak"></div>
                                    <div class="fl jx-titleText" :title="item.name"  v-if="item.studied" style="color:#787878">单元{{index+1}}&nbsp;{{item.name}}</div>
                                    <div class="fl jx-titleText" :title="item.name"   v-if=" !item.studied">单元{{index+1}}&nbsp;{{item.name}}</div>
                                    <i class="iconfont icon-diannao-copy" v-if="item.type == 2 || item.type == 3 " v-show=" !item.studied" ></i>
                                    <i class="iconfont icon-diannao-copy" v-if="item.type == 2 || item.type == 3 " v-show=" item.studied" style="color:#c7c8c8"></i>
                                    <i class="iconfont icon-zhengque" v-if="item.studied"></i>
                                    <div class="fr jx-titleTip" v-if="item.recentlyStudiedFlag">最近学习</div>
                                </div>
                                <div class="jx-chapter-detail" v-text="item.introduction" v-if="item.studied" style="color:#c7c8c8"></div>
                                <div class="jx-chapter-detail" v-text="item.introduction" v-else style="color:#a5a4a4"></div>
                            </div>
                        </template>
                        <el-collapse accordion class="jx-course-collapse" v-model="activeName2">
                            <div v-if="item.children.length > 0">
                                <el-collapse-item  v-for="(current,index3) in item.children"  :key="index3" class="collapsesleval" :name="current.id" >
                                    <template slot="title">
                                        <div class="jx-title-box2">
                                            <!-- 已学完 -->
                                            <div class="jx-titleText2" :title="current.name"  :id="'current'+current.id"  v-if="current.studied" style="color:#c7c8c8">
                                                <span class="jx-titleText2-span">{{index3+1}}.{{current.name}}</span>
                                                <i class="iconfont icon-diannao-copy" v-if="current.type == 2 || current.type == 3" style="color:#c7c8c8"></i>
                                                <i class="iconfont icon-tubiaozhizuomoban1"  v-if="current.type == 4" style="color:#c7c8c8"></i>
                                                <span v-if="!current.locked && (roles == 'TEACHER' || roles == 'MARKET_TEACHER' || roles == 'UNIVERSITY_TEACHER')" style="margin-right:60px;transform: translate(0px, 5px);" class="fr statistics" @click.stop="toStatisticsExperiment(current)">
                                                    <el-tooltip class="item" effect="dark" content="章节统计" placement="bottom">
                                                        <i style="padding:0 10px;" class="iconfont icon-tongji"></i>
                                                    </el-tooltip>
                                                </span>
                                                <div class="lockedStyle level3" v-if="current.locked"><i class="iconfont icon-lock"></i></div>
                                            </div>
                                            <!-- 未学完 -->
                                            <div class="jx-titleText2" :title="current.name"  :id="'current'+current.id"  v-if="!current.studied">
                                                <span class="jx-titleText2-span">{{index3+1}}.{{current.name}}</span>
                                                <i class="iconfont icon-diannao-copy" v-if="current.type == 2 || current.type == 3 " ></i>
                                                <i class="iconfont icon-tubiaozhizuomoban1"  v-if="current.type == 4"></i>
                                                <span v-show="myClassId" v-if="!current.locked && (roles == 'TEACHER' || roles == 'MARKET_TEACHER' || roles == 'UNIVERSITY_TEACHER')" style="margin-right:60px;transform: translate(0px, 5px);" class="fr statistics" @click.stop="toStatisticsExperiment(current)">
                                                    <el-tooltip class="item" effect="dark" content="章节统计" placement="bottom">
                                                        <i style="padding:0 10px;" class="iconfont icon-tongji"></i>
                                                    </el-tooltip>
                                                </span>
                                                <div class="lockedStyle level3" v-if="current.locked"><i class="iconfont icon-lock"></i></div>
                                            </div>
                                            <div class="jx-chapter-detail2" v-if="current.studied" style="color:#c7c8c8">{{current.introduction}}</div>
                                            <div class="jx-chapter-detail2" v-else style="color:#a5a4a4">{{current.introduction}}</div>
                                        </div>
                                    </template>
                                    <div v-if="current.otherInfo.length > 0" style="padding:10px 0">
                                        <div class="jx-chapter-info2" v-for="(item2, index2) in current.otherInfo" :key="index2"  @click="enterLink(item,item2,item2.name, item2.show, item2.id,item2.experimentCourseFlag,current)">
                                            <el-tooltip v-if="!item2.show" class="item" effect="dark" :content="item2.hideDescription" placement="bottom">
                                                <i class="iconfont icon-42"></i>
                                            </el-tooltip>
                                            <i class="dian fl" v-else></i>
                                            <span class="taskName">
                                                {{item2.name}}
                                                <span v-show="myClassId" class="statistics" @click.stop="toStatistics(current,item2)" v-if="item2.type === 4 && (roles == 'TEACHER' || roles == 'MARKET_TEACHER' || roles == 'UNIVERSITY_TEACHER')">
                                                    <el-tooltip class="item" effect="dark" content="随堂练习统计" placement="bottom">
                                                        <i style="padding:0 20px;" class="iconfont icon-tongji"></i>
                                                    </el-tooltip>
                                                </span>
                                            </span>
                                            <i class="iconfont icon-diannao-copy intnet" v-if="item2.experimentCourseFlag && item2.name != '实验学习'" ></i>
                                            <span class="evaluat" v-if="item2.evaluatStatus != '' && item2.evaluatStatus != undefined">( {{ item2.evaluatStatus }} )</span>
                                            <div class="enter" v-if="item2.show">进入 ></div>
                                        </div>
                                    </div>
                                    <div class="jx-chapter-info2" v-else>暂无数据</div>
                                </el-collapse-item>
                            </div>
                            <div  class="jx-title-box3" v-else>暂无数据</div>
                        </el-collapse>
                    </el-collapse-item>
                    <el-collapse-item  :name='Number(index)'  v-if="item.levels == 2"  >
                        <template slot="title">
                            <div style="padding-bottom:10px;">
                                <div class="jx-title-box">
                                    <div class="fl jx-blueStreak"></div>
                                    <div class="fl jx-titleText" :title="item.name"  :id="'current'+index"  v-if="item.studied" style="color:#787878">{{index+1}}章&nbsp;&nbsp;&nbsp;{{item.name}}</div>
                                    <div class="fl jx-titleText" :title="item.name"  :id="'current'+index"  v-if=" !item.studied">{{index+1}}章&nbsp;&nbsp;&nbsp;{{item.name}}  </div>
                                    <i class="iconfont icon-diannao-copy" v-if="item.type == 2 || item.type == 3 " v-show=" !item.studied" ></i>
                                    <i class="iconfont icon-diannao-copy" v-if="item.type == 2 || item.type == 3 " v-show=" item.studied" style="color:#c7c8c8"></i>
                                    <i class="iconfont icon-tubiaozhizuomoban1"  v-if="item.type == 4" v-show=" !item.studied"></i>
                                    <i class="iconfont icon-tubiaozhizuomoban1"  v-if="item.type == 4" v-show=" item.studied" style="color:#c7c8c8"></i>
                                    <i class="iconfont icon-zhengque" v-if="item.studied"></i>
                                    <!-- stepTypeStr -->
                                    <span v-show="myClassId" v-if="!item.locked && item.type != 5 && (roles == 'TEACHER' || roles == 'MARKET_TEACHER' || roles == 'UNIVERSITY_TEACHER')" style="margin-right:30px;" class="fr statistics" @click.stop="toStatisticsExperiment(item)">
                                        <el-tooltip class="item" effect="dark" content="章节统计" placement="bottom">
                                            <i style="padding:0 10px;" class="iconfont icon-tongji"></i>
                                        </el-tooltip>
                                    </span>
                                    <div class=" fr lockedStyle" v-if="item.locked "><i class="iconfont icon-lock"></i></div>
                                    <div class="fr jx-titleTip" v-if="item.recentlyStudiedFlag">最近学习</div>
                                </div>
                                <div class="jx-chapter-detail" v-text="item.introduction" v-if="item.studied" style="color:#c7c8c8"></div>
                                <div class="jx-chapter-detail" v-text="item.introduction" v-else style="color:#757575"></div>
                            </div>
                        </template>
                        <div v-if="item.otherInfo.length > 0">
                            <div class="jx-chapter-info"   v-for="(item2, index2) in item.otherInfo" :key="index2"  @click="enterLink(item,item2,item2.name, item2.show, item2.id,item2.experimentCourseFlag,item)">
                                <el-tooltip v-if="!item2.show " class="item" effect="dark" :content="item2.hideDescription" placement="bottom">
                                    <i class="iconfont icon-42"></i>
                                </el-tooltip>
                                <i class="dian fl" v-else></i>
                                <span class="taskName">
                                    {{item2.name}}
                                    <span v-show="myClassId" class="statistics" @click.stop="toStatistics(item,item2)" v-if="item2.type === 4 && (roles == 'TEACHER' || roles == 'MARKET_TEACHER' || roles == 'UNIVERSITY_TEACHER')">
                                        <el-tooltip class="item" effect="dark" content="随堂练习统计" placement="bottom">
                                            <i style="padding:0 20px;" class="iconfont icon-tongji"></i>
                                        </el-tooltip>
                                    </span>
                                </span>
                                <i class="iconfont icon-diannao-copy intnet" v-if="item2.experimentCourseFlag && item2.name != '实验学习'" ></i>
                                <span class="evaluat" v-if="item2.evaluatStatus != '' && item2.evaluatStatus != undefined">( {{ item2.evaluatStatus }} )</span>
                                <div class="enter" v-if="item2.show">进入 ></div>
                             </div>
                        </div>
                        <div class="jx-chapter-info" v-else>
                            暂无数据
                        </div>

                    </el-collapse-item>
                </div>
                </el-collapse>
                <div class="jx-mainSection-tip fl" v-else>
                    <img src="./../../../assets/images/index_no_data.png" />
                    <p>暂无内容</p>
                </div>
            </div>
            <div v-if="n == 1">
                <div  v-if="TargetList.length > 0 ">
                    <div v-for="item in TargetList" :key="item.id" class="jx-course-name-detail">
                        <div class="jx-course-target-top">
                            <img src="./../../../assets/images/bei.png"/>
                            <span>{{ item.courseName }}</span>
                        </div>
                        <div class="jx-course-target-bottom">
                            {{ item.details }}
                        </div>
                    </div>
                </div>
                <!-- 暂无数据 -->
                 <div class="jx-mainSection-tip fl" v-else>
                    <img src="./../../../assets/images/index_no_data.png" />
                    <p>暂无课程目标</p>
                </div>
            </div>
        </div>

        <div id="jx-sideSection" class="jx-sideSection fr">
            <div class="jx-sideOne" v-if="CourseChapterListStatus == '200' && (roles == 'TEACHER' || roles == 'MARKET_TEACHER' || roles == 'UNIVERSITY_TEACHER')">
                <div class="jx-title-box">
                    <div class="fl jx-blueStreak"></div>
                    <div class="fl jx-titleText">授课信息</div>
                </div>
                <div class="jx-info-box">
                    <img class="jx-teacherIcon fl" :src="CourseTeacherData.iconPath" />
                    <div class="jx-teacherName fl">
                        <p class="overflowName"  v-if=" CourseTeacherDataCopy.length <= 1"  :title="CourseTeacherData.name">
                            教师：{{ CourseTeacherData.name }}
                        </p>
                        <p class="overflowName" v-else :title="CourseTeacherData.name + ' , ' +CourseTeacherDataCopy[1].name ">
                            教师：{{ CourseTeacherData.name }}
                            <span v-if="CourseTeacherDataCopy.length >= 2" :class="{ active : CourseTeacherDataCopy.length > 3}">，{{ CourseTeacherDataCopy[1].name }}</span>
                        </p>
                        <p>班级：{{ TeachingClass }}</p>
                    </div>
                </div>
                <!-- <div class="jx-class-manage">
                    <div class="jx-class-name fl" :title="TeachingClass">当前教授班级&nbsp;&nbsp;{{ TeachingClass }}班</div>
                    <button class="button-style fl" @click="goManageLink">管理</button>
                </div> -->
            </div>
            <div class="jx-sideOne student-sideOne" v-if="roles == 'STUDENT'">
                <div class="jx-title-box">
                    <div class="fl jx-blueStreak"></div>
                    <div class="fl jx-titleText">授课信息</div>
                </div>
                <div class="jx-info-box">
                    <img class="jx-teacherIcon fl" :src="CourseTeacherData.iconPath" />
                    <div class="jx-teacherName fl" v-if="CourseTeacherData.showEmail">
                        <p class="overflowName" v-if=" CourseTeacherDataCopy.length <= 1"   :title="CourseTeacherData.name">
                            教师：{{ CourseTeacherData.name }} <span v-if="CourseTeacherDataCopy.length >= 2" :class="{ active : CourseTeacherDataCopy.length > 3}">，{{ CourseTeacherDataCopy[1].name }}</span>
                        </p>
                        <p class="overflowName" v-else :title="CourseTeacherData.name + ' , ' +CourseTeacherDataCopy[1].name ">
                            教师：{{ CourseTeacherData.name }}
                            <span v-if="CourseTeacherDataCopy.length >= 2" :class="{ active : CourseTeacherDataCopy.length > 3}">，{{ CourseTeacherDataCopy[1].name }}</span>
                        </p>
                        <p v-if="CourseTeacherData.studentClassName">班级：{{ CourseTeacherData.studentClassName }}</p>
                        <p v-if="CourseTeacherData.showEmail">邮箱：{{ CourseTeacherData.email }}</p>
                    </div>
                    <div class="jx-teacherName showEmail fl" v-else>
                        <p class="overflowName" v-if=" CourseTeacherDataCopy.length <= 1"   :title="CourseTeacherData.name">
                            教师：{{ CourseTeacherData.name }} <span v-if="CourseTeacherDataCopy.length >= 2" :class="{ active : CourseTeacherDataCopy.length > 3}">，{{ CourseTeacherDataCopy[1].name }}</span>
                        </p>
                        <p class="overflowName" v-else :title="CourseTeacherData.name + ' , ' +CourseTeacherDataCopy[1].name ">
                            教师：{{ CourseTeacherData.name }}
                            <span v-if="CourseTeacherDataCopy.length >= 2" :class="{ active : CourseTeacherDataCopy.length > 3}">，{{ CourseTeacherDataCopy[1].name }}</span>
                        </p>
                        <p v-if="CourseTeacherData.studentClassName">班级：{{ CourseTeacherData.studentClassName }}</p>
                    </div>
                </div>
            </div>
            <div class="jx-sideOne" v-if="CourseChapterListStatus == '100106'">
                <div class="jx-add-class">
                    <span>添加班级</span>
                    <button class="button-style" @click="AddClass">+</button>
                </div>
            </div>
            <!-- <div class="jx-sideOne">
                <div class="jx-info-tips">尚未加入班级进行学习哦~</div>
            </div> -->
            <div class="jx-sideOne" v-if="CourseChapterListStatus == '404'">
                <div class="jx-info-tips">全部班级已结课~</div>
            </div>
            <div class="jx-sideTwo" v-if="CourseChapterListStatus == '200'">
                <div class="jx-title-box">
                    <div class="fl jx-blueStreak"></div>
                    <div class="fl jx-titleText">当前班级</div>
                </div>
                <div class="jx-class-chose">
                    <i>当前教授班级:</i>
                    <template>
                        <el-select v-model="classValue" placeholder="请选择" @change="SelectClass">
                            <el-option
                            v-for="(item) in classOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </template>
                    <el-tooltip class="item" effect="dark" content="选择当前教授的班级，该课程系统默认按该班级检索。" placement="bottom">
                        <i  class="iconfont icon-wenti-m"></i>
                    </el-tooltip>
                </div>
                <div class="jx-class-detail">
                        <div>班级人数：<i>{{ CourseClassStatisticsData.studentCount }}人</i></div>
                        <div>未审批实验报告：<i>{{ CourseClassStatisticsData.unreviewedReportCount }}份</i><button class="button-style" @click="goReviewLink(1,CourseClassStatisticsData.status,CourseClassStatisticsData.grade,CourseClassStatisticsData.name)">批阅</button></div>
                        <div>未批改随堂练习：<i>{{ CourseClassStatisticsData.unreviewedPracticeCount }}份</i><button class="button-style" @click="goReviewLink(2,CourseClassStatisticsData.status,CourseClassStatisticsData.grade,CourseClassStatisticsData.name)">批阅</button></div>
                        <div>未批改试卷：<i>{{ CourseClassStatisticsData.unreviewedTestPaperCount }}份</i><button class="button-style" @click="goReviewLink(3)">批阅</button></div>
                </div>
                <div class="jx-button-box">
                    <button class="button-style jx-stu-attendance" @click="studentAttendance">学生考勤</button>
                    <button class="button-style fl" @click="goManageLink" style="margin-right:10px">管理</button>
                    <!-- <button class="button-style jx-lab-control" @click="dialogHandbook = true">实验手册显隐</button> -->
                </div>
            </div>
            <div class="jx-sideThree" v-if="isLearnContentFlag">
                 <div class="jx-title-box">
                    <div class="fl jx-blueStreak"></div>
                    <div class="fl jx-titleText">学习进度</div>
                </div>
                <!-- <div class="jx-title-box">
                    <div class="fl jx-blueStreak"></div>
                    <div class="fl jx-titleText">你能学到什么</div>
                </div>
                <div class="jx-course-detail">本课程包括线性代数、多元微积分和概率统计三部分，为大家深入学习大数据课程打下良好基础。在线性代数中，我们着重介绍矢量、向量和矩阵以及它们之间的关系，特征值和特征向量的原理以及应用。在多元微积分部分，加强之后，将充分了解大数据学习所需要的数学知识。</div> -->
                <!-- 专科版本需求去掉课时 -->
                <!-- <div class="jx-course-total">
                    本门课程共<i v-text="CourseClassTime"></i>课时
                </div> -->
                <div class="gray-line"></div>
                <div class="jx-course-learned" v-if="isLearnFlag">已学习到  <i v-text="CourseLearnData.name"></i></div>
                <div><el-button class="button-style jx-recent-study" :class="{ 'disabled' : !isLearnFlag }" :disabled="!isLearnFlag" @click="RecentlyStudied(CourseLearnData.id)">最近学习</el-button></div>
            </div>
        </div>
        <!-- <el-dialog class="dialog-handbook" title="实验手册显隐控制" :visible.sync="dialogHandbook" width="460px" center>
            <div class="dialog-content clear-fix">
                <p><i class="iconfont icon-jingshi"></i>批量控制该课程学生端所有实验手册显隐</p>
                <div class="handbook-item">
                    <el-radio-group v-model="displayRadios">
                        <el-radio :label="1">显示</el-radio>
                        <el-radio :label="2">隐藏</el-radio>
                    </el-radio-group>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button class="button-style" @click="displaySave">确 定</el-button>
                <el-button class="button-style" @click="dialogHandbook = false">取 消</el-button>
            </span>
        </el-dialog> -->
        <el-dialog :close-on-click-modal="false" class="dialog-virtual" title="提示" :visible.sync="dialogVirtual" width="460px">
            <div class="dialog-content">
                <i class="iconfont icon-tishi"></i>
                <p>有其它实验正在进行中，是否停止它进入该实验?</p>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button class="button-style" @click="dialogVirtual = false">取 消</el-button>
                <el-button class="button-style" @click="VirtualSave">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog :close-on-click-modal="false" class="dialog-add-class" title="添加班级" :visible.sync="dialogAddClass" width="460px">
            <span slot="footer" class="dialog-footer" style="text-align:center; display: block;">
                <el-button class="button-style" style="width: 120px;" @click="jumpClass(1)">创建本课班级</el-button>
                <el-button class="button-style" style="width: 120px;" @click="jumpClass(2)">关联系统班级</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            // 课程ID
            coursesId: '',
            // 章节ID
            ChapterId: '',
            //登录角色 ''未登录 TEACHER 教师 ADMIN管理员 STUDENT学生
            roles: '',
            // 班级ID
            classId: '',

            // 跳转时章节id
            VirtualSaveChapterId: '',
            userStatus: '',
            // 章节列表标记
            activeName: '',
            // 当前授课班级
            TeachingClass: '',
            // 班级下拉列表
            classOptions: [],
            classValue: '',
            // 课程信息data
            CourseInfoData: '',
            // 课程教师信息data
            CourseTeacherData: '',
            CourseTeacherDataCopy: '',
            // 课程教师信息状态值
            CourseTeacherStatus: false,
            // 课程章节列表data
            CourseChapterListData: '',
            // 课程章节data状态值
            CourseChapterListStatus: '',
            // 课程最近学习data
            CourseLearnData: '',
            //  课程统计data
            CourseClassStatisticsData: '',
            // 判断是否显示已结课提示
            ClosedClassFlag: '',
            // 判断是否显示添加班级提示
            isAddClassFlag: '',
            // 判断是否有数据
            isClassInfoFlag: '',
            // 判断最近学习模块按钮是否禁用
            isLearnFlag: '',
            // 判断最近学习是否显示
            isLearnContentFlag: '',
            // 最近学习课时
            CourseClassTime: '',
            // 实验手册显隐控制
            // dialogHandbook: false,
            // 显示隐藏radios
            displayRadios: 1,
            // 是否进入实验显示隐藏
            dialogVirtual: false,
            //跳转值
            typesStatus:'',
            //3层级的标识展开
            activeName2:'',
            //从课程体系页面跳转到这
            takList:{
                taskChildrenId:'',
                taskId:'',
                taskLevels:''
            },
            // 二期需求
            dialogAddClass: false,
            //新增classId传值
            myClassId:"",
            //新增className传值
            myClassName:"",
            stepTypeStr:'',
            singleChaper:'',
            //切换
             n:0,
            tabs:[
                {
                    title:'课程章节'
                },
                {
                    title:'课程目标'
                }
            ],

            //目标数据
            TargetList:[],

            //是否从首页进来
            isfromIndex:false
        }
    },
    created () {
        let self = this
        // 课程ID
        self.coursesId = self.$localstorage.getLocalStorage('setCourseId')
        // 章节ID
        self.roles = self.$store.state.user.roles[0]
        // self.ChapterId = self.$route.query.ChapterId
        // 初始化班级下拉
        // 判断如果是教师则可以执行
        if(self.roles == 'TEACHER' || self.roles == 'MARKET_TEACHER' || self.roles == 'UNIVERSITY_TEACHER'){
            self.InitClassSelect()
        }
        self.$nextTick(function () {
            self.menuFixed('jx-sideSection');
        })
         // 初始化最近学习
        self.InitCourseLearn()
        // 初始化课程信息
        self.InitCourseInfo()
        // 初始化教师信息
        self.InitCourseTeacherInfo()

        // 初始化章节列表
        //self.InitCourseChapterList()

        // 导航初始化
        self.NavInit()

        //专科版本
        //本地缓存获取值
        self.takList.taskId = self.$localstorage.getLocalStorage('takList').taskId
        
        // self.takList.taskChildrenId = self.$localstorage.getLocalStorage('takList').taskChildrenId
        self.takList.taskLevels = self.$localstorage.getLocalStorage('takList').taskLevels
  
        this.getTargetList()

    },
    destroyed: function() {
        //页面销毁时关闭滚动条事件
         window.onscroll = null
         //专科版本
         //页面销毁后清空
         this.$localstorage.removeLocalStorage('takList','')
    },

    //   beforeRouteEnter (to, from, next) {
    //       next( vm =>{
    //           console.log(from, to,11111)
    //           if(from.path == '/Teaching/index'){
    //               vm.isfromIndex = true
    //           }
    //       })
    //   },
    methods: {
        //获取课程目标数组
        getTargetList(){
            let self = this
            self.$http.get('/tes/conclude/course/list/student?courseId='+self.coursesId).then(response => {
                let res = response.data
                if(res.code == '200'){
                    self.TargetList = res.data
                }else{
                    self.$message.error(res.message)
                }
            }).catch(err => {
                console.log(err)
            })
        },
        //实验统计
        toStatisticsExperiment(item){
            //1 理论
            //2 实验
            //3 理论单任务
            //4 理论多任务
            console.log(item.type,22222);
            let self = this;
            if(self.myClassId == ''){
                self.$message.error("请先添加班级！")
                return;
            }
            if(self.CourseClassStatisticsData){
                if(self.CourseClassStatisticsData.studentCount == 0){
                    self.$message.error("请先添加学生！")
                    return;
                }
            }

            let newWindow = window.open()
            let routeData = self.$router.resolve({
                name: "StatisticsExperiment",
                query: {
                    //1 理论
                    //2 实验
                    //3 理论单任务
                    //4 理论多任务
                    type:item.type,
                    courseId: self.coursesId,
                    chapterId: item.id,
                    // typesStatus:self.typesStatus,
                    classId:self.myClassId,
                    //课程名称
                    courseName:self.CourseInfoData.name,
                    //章节名称
                    chapterName:item.name,
                    //班级名称
                    className:self.myClassName,
                    //是否显示饼图，多任务显示，其余不显示，多任务type为4
                    showPie: (item.type == 3 && item.stepTypeStr == '多步骤实验') ?1:0
                    //myClassId
                    // evaluatStatus:item2.otherInfo[0].evaluatStatus
                }
            });
            newWindow.location.href = routeData.href
        },
        //随堂练习统计
        toStatistics(item,item2){
            let self = this;
            if(self.myClassId == ''){
                self.$message.error("请先添加班级！")
                return;
            }
            if(self.CourseClassStatisticsData.studentCount == 0){
                self.$message.error("请先添加学生！")
                return;
            }

            let newWindow = window.open()
            let routeData = self.$router.resolve({
                name: "StatisticsClassExercises",
                query: {
                    courseId: self.coursesId,
                    chapterId: item2.id,
                    // typesStatus:self.typesStatus,
                    classId:self.myClassId,
                    //课程名称
                    courseName:self.CourseInfoData.name,
                    //章节名称
                    chapterName:item.name,
                    //班级名称
                    className:self.TeachingClass
                    //myClassId
                    // evaluatStatus:item2.otherInfo[0].evaluatStatus
                }
            });
            newWindow.location.href = routeData.href

        },
        //白哥新需求点击单元展开第一个章节
        handleChange(val){
            //val 为索引
            let self = this
            if( val ){
                if(self.CourseChapterListData[val].levels == 3 && self.CourseChapterListData[val].recentlyStudiedFlag != 1){
                    for(let i =0; i< self.CourseChapterListData.length; i++){
                    //展开子节点
                        if(self.CourseChapterListData[i].children){
                            this.activeName2 = self.CourseChapterListData[val].children[0].id
                        }
                    }
                }else if(self.CourseChapterListData[val].levels == 3 && self.CourseChapterListData[val].recentlyStudiedFlag == 1){ //3层且有最近学习
                    for(let i =0; i< self.CourseChapterListData.length; i++){
                        if(self.CourseChapterListData[i].children){
                            for(let k=0; k<self.CourseChapterListData[i].children.length; k++){
                                if(self.CourseChapterListData[i].children[k].chapterIds.includes(Number(self.CourseLearnData.id))){
                                    this.activeName2 = self.CourseChapterListData[i].children[k].id
                                }
                            }
                        }
                    }
                }
            }else if( val == 0 ){
                if(self.CourseChapterListData[0].levels == 3  && self.CourseChapterListData[0].recentlyStudiedFlag != 1){
                    for(let i =0; i< self.CourseChapterListData.length; i++){
                        //展开子节点
                        if(self.CourseChapterListData[i].children){
                            this.activeName2 = self.CourseChapterListData[0].children[0].id
                        }
                    }
                }else if(self.CourseChapterListData[0].levels == 3 && self.CourseChapterListData[0].recentlyStudiedFlag == 1){ //3层且有最近学习
                    for(let i =0; i< self.CourseChapterListData.length; i++){
                        if(self.CourseChapterListData[i].children){
                            for(let k=0; k<self.CourseChapterListData[i].children.length; k++){
                                if(self.CourseChapterListData[i].children[k].chapterIds.includes(Number(self.CourseLearnData.id))){
                                    this.activeName2 = self.CourseChapterListData[0].children[k].id
                                }
                            }
                        }
                    }
                }
            }

        },
        // 右侧菜单定位
        menuFixed(id) {
            let self = this
            let obj = document.getElementById(id);
            let _getHeight = obj.offsetTop;
            window.onscroll = function () {
                self.changePos(id, _getHeight);
            }

        },
        changePos(id, height) {
            var obj = document.getElementById(id);
            var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            if (scrollTop < height || screen.height<=900) {
                obj.style.position = 'relative';
                obj.style.right = 'auto';
                obj.style.top = 'auto';
            } else {
                obj.style.position = 'fixed';
                obj.style.right = ($(window).width() - 1200) / 2 + 'px';
                obj.style.top = '60px';
            }
        },
        // 导航初始化
        NavInit() {
            let self = this
            self.$http.get('/tes/course/'+self.coursesId+'/user-status').then(response => {
                let res = response.data
                if(res.code == '200'){
                    self.userStatus = res.data
                }else{
                    self.$message.error(res.message)
                }
            }).catch(err => {
                console.log(err)
            })
        },
        // 初始化班级下拉
        InitClassSelect(){
            let self = this
            self.$http.get('/tes/course/'+self.coursesId+'/list-class?endFlag=false').then(response => {
                let res = response.data
                // 课程章节data状态值
                self.CourseChapterListStatus = res.code
                if(res.code == '100106'){
                    if(self.roles != 'STUDENT'){
                        self.myClassId = '';
                    }
                }
                if(res.code == '200'){
                    if(self.roles != 'STUDENT'){
                        console.log(res.data[0].classIds[0],65355);
                        self.myClassId = res.data[0].classIds[0];
                        self.myClassName = res.data[0].name;

                    }
                    for (let i = 0; i < res.data.length; i++) {
                        let classOptionsJson = {}
                        classOptionsJson.value = res.data[i].id
                        classOptionsJson.label = res.data[i].name
                        self.classOptions.push(classOptionsJson)
                    }
                    self.ClosedClassFlag = false
                    // 初始化当前班级值
                    self.TeachingClass = self.classOptions[0].label
                    self.classValue = self.classOptions[0].value

                    self.classId = self.classOptions[0].value
                    // 初始化班级统计
                    self.InitCourseClassStatistics()
                }else if(res.code == '100106'){
                }else if(res.code == '404'){
                }else{
                    self.$message.error(res.message)
                }
            }).catch(err => {
                console.log(err)
            })
        },
        // 初始化课程信息
        InitCourseInfo() {
            let self = this
            self.$http.get('/tes/course/'+self.coursesId).then(response => {
                let res = response.data
                if(res.code == '200'){
                    self.CourseInfoData = res.data
                }else{
                    self.$message.error(res.message)
                }
            }).catch(err => {
                console.log(err)
            })
        },
        // 初始化教师信息
        InitCourseTeacherInfo() {
            let self = this
            self.$http.get('/tes/course/'+self.coursesId+'/user').then(response => {
                let res = response.data
                if(res.code == '200'){
                    self.CourseTeacherStatus = true
                    if(res.data.length > 0){
                        self.CourseTeacherData = res.data[0]
                        self.CourseTeacherDataCopy = res.data

                        if(self.roles == 'STUDENT'){
                            //跳转其他多个页面  不更换字段 ，所以在加一个
                            self.classId = res.data[0].classId
                            self.myClassId = res.data[0].classId;
                            self.myClassName = res.data[0].studentClassName
                            console.log(self.myClassId,555)
                        }
                    }else{
                        self.CourseTeacherData = ''
                        self.CourseTeacherDataCopy = ''
                    }
                }else{
                    self.$message.error(res.message)
                }
            }).catch(err => {
                console.log(err)
            })
        },

        // 初始化章节列表
        InitCourseChapterList() {
            let self = this
            document.documentElement.scrollTop = 0
            self.CourseChapterListData = ''
            self.CourseClassTime = ''
            self.isLearnContentFlag = ''
            self.activeName = ''
            self.activeName2 = ''
            self.takList.taskLevels = ''
            //清空层级
            self.$http.get('/tes/course/'+self.coursesId+'/chapter/list').then(response => {
                let res = response.data
                if(res.code == '200'){
                    self.CourseChapterListData = res.data
                    self.CourseClassTime = res.data.length * 2
                    self.isLearnContentFlag = true
                    //专科版本需求
                    //三级数据定位到最近学习
                    //数据展开分两种 1 从首页跳转来  2 从课程体系中（会带参数）
                    let IndexValue;
                    let IndexValue2;
                    if(self.takList.taskLevels == 2){//二级数据
                        for(let i =0; i< res.data.length; i++){
                            if(self.takList.taskId == res.data[i].id){
                                IndexValue = i
                            }
                        }
                        this.activeName = IndexValue
                        //课程体系进来时，有滚动
                        self.$nextTick(()=>{
                            document.documentElement.scrollTop = $('#item'+self.takList.taskId).offset().top -60
                        })
                    }else if(self.takList.taskLevels == 3){  //三级数据
                        for(let i =0; i< res.data.length; i++){
                            if(self.takList.taskId == res.data[i].id){
                                IndexValue = i
                            }
                            if(res.data[i].children){
                                for(let k =0; k < res.data[i].children.length; k++){
                                    if(res.data[i].children[k].otherInfo){
                                        if(self.takList.taskId == res.data[i].children[k].id ){
                                            IndexValue2 = k
                                        }
                                    }
                                }
                            }
                        }
                        this.activeName2 = IndexValue2
                        this.activeName = IndexValue
                        //课程体系进来时，有滚动
                        self.$nextTick(()=>{
                            document.documentElement.scrollTop = $('#item'+self.takList.taskId).offset().top -60
                        })
                    }else{ //什么都没有，说明不是从课程体系页面来的
                        // !isfromIndex 不是从首页进来的
                        if(self.CourseLearnData){
                             //console.log(self.CourseLearnData.id,44)
                            //说明最近学习中有值
                            for(let i =0; i< self.CourseChapterListData.length; i++){
                                if(self.CourseChapterListData[i].chapterIds.includes(Number(self.CourseLearnData.id))){
                                    this.activeName = i
                                }
                                //展开子节点
                                if(self.CourseChapterListData[i].children){
                                    for(let k=0; k<self.CourseChapterListData[i].children.length; k++){
                                    if(self.CourseChapterListData[i].children[k].chapterIds.includes(Number(self.CourseLearnData.id))){
                                            this.activeName2 = self.CourseChapterListData[i].children[k].id
                                        }
                                    }
                                }
                            }
                          if(this.activeName != undefined && !this.activeName2 && this.isfromIndex){
                              //二级
                                self.$nextTick(()=>{
                                    let pareneNodes = $('#current'+ this.activeName)
                                    document.documentElement.scrollTop = pareneNodes.offset().top - 60
                               })
                          }else if(this.activeName2 != undefined && this.activeName != undefined 　&& this.isfromIndex){
                              //三级
                            // console.log(this.activeName2,222)
                              self.$nextTick(()=>{
                                    let pareneNodes = $('#current'+self.activeName2)
                                    document.documentElement.scrollTop = pareneNodes.offset().top - 60
                               })
                          }

                        }else{
                            //console.log(33)
                            //说明最近学习没有
                            //默认展开第一项及子集
                            this.$nextTick(()=>{
                                for(let i =0; i< self.CourseChapterListData.length; i++){
                                    if(self.CourseChapterListData[i].children){
                                        this.activeName2 = self.CourseChapterListData[0].children[0].id
                                    }
                                }
                                this.activeName = 0
                            })
                        }

                        //专科 如果是从其他页面跳转进来，默认展开第一项
                        //this.activeName2 = IndexValue2
                    }
                }else if(res.code == '404'){
                    self.isLearnContentFlag = false
                }else{
                    self.$message.error(res.message)
                }
            }).catch(err => {
                console.log(err)
            })
        },
        // 初始化班级统计
        InitCourseClassStatistics() {
            let self = this
            self.$http.get('/tes/course/'+self.coursesId+'/class/'+self.classId+'/statistics').then(response => {
                let res = response.data
                if(res.code == '200'){
                    self.CourseClassStatisticsData = res.data
                }else{
                    self.$message.error(res.message)
                }
            }).catch(err => {
                console.log(err)
            })
        },
        // 初始化最近学习
        InitCourseLearn() {
            let self = this
            self.isLearnFlag = ''
            self.CourseLearnData = ''
            self.activeName = ''
            self.$http.get('/tes/course/'+self.coursesId+'/chapter/operation').then(response => {
                let res = response.data
                if(res.code == '200'){
                    self.isLearnFlag = true
                    self.CourseLearnData = res.data
                    //self.activeName = res.data.id
                   // self.isfromIndex = false

                    //yx添加为了让最近执行先执行
                    self.InitCourseChapterList()
                }else if(res.code == '404'){
                    self.isLearnFlag = false
                    self.InitCourseChapterList()
                }else{
                    self.$message.error(res.message)
                    self.InitCourseChapterList()
                }
            }).catch(err => {
                console.log(err)
            })
        },
        // 跳转管理页面
        goManageLink(){
            let self = this
            //跳转到班级管理
            // self.$router.push({
            //     path: '/Teaching/MyCourses/Management/ManageClass/ManageList',
            // })
            //跳转到学生管理  传递班级id
            self.$router.push({
                path: '/Teaching/MyCourses/Management/ManageClass/ManageStudent',
                query:{
                    id:self.classId
                }
            })
        },
        // 切换班级
        SelectClass(value) {
            let self = this
            let obj = {};
            obj = self.classOptions.find((item)=>{
                return item.value === value;
            })
            self.TeachingClass = obj.label
            self.classId = obj.value
            self.myClassId = obj.value;
            self.myClassName = self.classOptions.filter(item => item.value == obj.value)[0].label;
            console.log(self.myClassName,123);
            // 默认班级id
            self.$http.put('/tes/course/'+self.coursesId+'/class/'+self.classId+'/default').then(response => {
                let res = response.data
                if(res.code == '200'){
                }else{
                    self.$message.error(res.message)
                }
            }).catch(err => {
                console.log(err)
            })
            // 重新初始化班级消息
            self.InitCourseClassStatistics()
        },
        // 最近学习
        RecentlyStudied(id) {
            //console.log(id,789)
            let self = this
            let idIndex;
            self.isfromIndex = true
            //为了找最近学习索引 ，展开此项
            for(let i =0; i< self.CourseChapterListData.length; i++){
                if(self.CourseChapterListData[i].chapterIds.includes(Number(id))){
                     this.activeName = i
                }
                //展开子节点
                if(self.CourseChapterListData[i].children){
                    for(let k=0; k<self.CourseChapterListData[i].children.length; k++){
                       if(self.CourseChapterListData[i].children[k].chapterIds.includes(Number(id))){
                            this.activeName2 = 0

                        }
                    }
                }
            }
            self.InitCourseChapterList()
            //定位
            // let pareneNodes = $('.jx-titleTip').parent().parent().parent().parent().parent()
            // document.documentElement.scrollTop = pareneNodes.offset().top - 60
            //yx  可能有问题

            // let pareneNodes = $('#current'+idIndex)
            // document.documentElement.scrollTop = pareneNodes.offset().top - 60

            //document.documentElement.scrollTop = $('#item'+id).offset().top -60
            // self.activeName = id
        },
        // 跳转课程管理
        CourseManage(){
            let self = this
            self.$router.push({
                path: '/Teaching/Course/CreativeCourse/CourseBaseInfo'
            })
        },
        // 跳转我的课件
        jumpLink(jumpData){
            let newWindow = window.open()
            let routeData = this.$router.resolve({
                name: jumpData
            })
            // window.open(routeData.href, '_blank')
            newWindow.location.href = routeData.href

        },
        // 跳转我的批阅
        goReviewLink(index,status,grade,name) {
            let self = this
            if(index == 1){
                self.$router.push({  //yx修改
                    path: '/Teaching/MyCourses/marking',
                    query: {
                         reportArr: status+','+grade+','+name,
                    }
                })
            }else if(index == 2){
                self.$router.push({  //yx修改
                    path: '/Teaching/MyCourses/marking',
                    query: {
                         classArr: status+','+grade+','+name,
                    }
                })
            }else if(index == 3){
                self.$router.push({
                    path: '/Teaching/MyCourses/Examination/TestPaper/ExaminationList'
                })
            }
        },
         //tab切换
        tab(num){
            this.n = num
        },
        // 学生考勤
        studentAttendance() {
            let self = this
            let newWindow = window.open()
            let routeData = self.$router.resolve({
                name: "StuAttendance",
                query: {
                    courseId: self.coursesId,
                    CourseInfoData:self.CourseInfoData.name
                }
            })
            // window.open(routeData.href, '_blank')
            newWindow.location.href = routeData.href

        },
        // 查看大纲
        lookOutline(){
            let self = this
            let routeData
            let newWindow = window.open()
            routeData = self.$router.resolve({
                name: "CourseOutline",
                query: {
                    courseId: self.coursesId
                }
            })
            newWindow.location.href = routeData.href
        },
        // 进入页面
        enterLink(item,that2,name, show, id,experimentCourseFlag,item2){

            //experimentCourseFlag 实验学习和任务判断标识
            let self = this
            self.isfromIndex = true
            self.$localstorage.removeLocalStorage('takList','')
           // self.stepTypeStr = item.stepTypeStr?item.stepTypeStr : item2.stepTypeStr
           console.log(that2,999)
           if(item.stepTypeStr){
               self.stepTypeStr = item.stepTypeStr
           }else if( item2 && item2.stepTypeStr){
               self.stepTypeStr = item2.stepTypeStr
           }
            self.singleChaper = that2.chapterId
            console.log(self.stepTypeStr,222)

            if (show) {
                let routeData
                self.VirtualSaveChapterId = id
                // name判断跳转页面
                if(name == '理论学习' || name =='任务引导'){
                    let newWindow = window.open()
                    routeData = self.$router.resolve({
                        name: "CoursewareDetail",
                        query: {
                            courseId: self.coursesId,
                            chapterId: id,
                            classId:self.classId,
                            singleChaper:that2.id

                        }
                    })

                    // window.open(routeData.href, '_blank')
                    newWindow.location.href = routeData.href
                    // window.location.reload()
                    setTimeout(() => {
                        //self.InitCourseChapterList()
                        self.InitCourseLearn()
                    }, 2000);
                }else if(name == '教学资源'){
                    let newWindow = window.open()
                    routeData = self.$router.resolve({
                        name: "CourseResourceDetail",
                        query: {
                            courseId: self.coursesId,
                            chapterId: id,
                            classId:self.classId,
                            evaluatStatus:that2.evaluatStatus,
                            singleChaper:that2.id
                        }
                    })
                    // window.open(routeData.href, '_blank')
                    newWindow.location.href = routeData.href
                    // window.location.reload()
                    setTimeout(() => {
                        //self.InitCourseChapterList()
                        self.InitCourseLearn()
                    }, 2000);
                }else if(name == '备课材料'){
                    let newWindow = window.open()
                    routeData = self.$router.resolve({
                        name: "CourseMaterialDetail",
                        query: {
                            courseId: self.coursesId,
                            chapterId: id,
                            classId:self.classId,
                            singleChaper:that2.id
                        }
                    })
                    // window.open(routeData.href, '_blank')
                    newWindow.location.href = routeData.href
                    // window.location.reload()
                    setTimeout(() => {
                        //self.InitCourseChapterList()
                        self.InitCourseLearn()
                    }, 2000);
                }else if(name == '实验学习' || experimentCourseFlag){

                    self.chapterId = id
                    // 如果未添加班级跳转实验手册
                    if(self.userStatus == 'NOT_CREATE_CLASS'){
                        let newWindow = window.open()
                        routeData = self.$router.resolve({
                            name: "VirtualMachineManual",
                            query: {
                                courseId: self.coursesId,
                                chapterId: id,
                                isCourseDetail:true,
                                classId:self.classId,
                                singleChaper:self.singleChaper,
                                stepTypeStr: self.stepTypeStr,

                            }
                        })
                        // window.open(routeData.href, '_blank')
                        newWindow.location.href = routeData.href
                        // window.location.reload()
                        setTimeout(() => {
                            //self.InitCourseChapterList()
                            self.InitCourseLearn()
                        }, 2000);
                    // 如果添加班级跳转实验页
                    }else if(self.userStatus == 'EXIST_CLASS'){
                        // 二期需求新增
                        self.$http.get('/tes/image-allocation/course/'+self.coursesId+'/'+id).then(response => {
                            let res = response.data
                            if(res.code == '200'){
                                if(res.data.allocated){
                                    self.$http.get('/tes/experiment/course/'+id+'/prompt').then(response => {
                                        let res = response.data
                                        if(res.code == '200'){
                                            if(res.data){
                                                // 弹窗是否强制跳转
                                                self.dialogVirtual = true
                                            }else{
                                                if (self.roles == 'TEACHER' || self.roles == 'MARKET_TEACHER' || self.roles == 'UNIVERSITY_TEACHER') {
                                                    let newWindow = window.open()

                                                    // 跳转实验页
                                                    routeData = self.$router.resolve({
                                                        name: "VirtualMachine",
                                                        query: {
                                                            courseId: self.coursesId,
                                                            chapterId: id,
                                                            classId:self.classId,
                                                            stepTypeStr: self.stepTypeStr,
                                                            singleChaper:self.singleChaper,
                                                        }
                                                    })
                                                    // window.open(routeData.href, '_blank')
                                                    newWindow.location.href = routeData.href
                                                    // window.location.reload()
                                                    setTimeout(() => {
                                                        //self.InitCourseChapterList()
                                                        self.InitCourseLearn()
                                                    }, 2000);
                                                }else if(self.roles == 'STUDENT'){
                                                    let newWindow = window.open()
                                                    // 跳转实验页
                                                    routeData = self.$router.resolve({
                                                        name: "STVirtualMachine",
                                                        query: {
                                                            courseId: self.coursesId,
                                                            chapterId: id,
                                                            classId:self.classId,
                                                            stepTypeStr: self.stepTypeStr,
                                                            singleChaper: self.singleChaper
                                                        }
                                                    })
                                                    // window.open(routeData.href, '_blank')
                                                    newWindow.location.href = routeData.href
                                                    // window.location.reload()
                                                    setTimeout(() => {
                                                       // self.InitCourseChapterList()
                                                        self.InitCourseLearn()
                                                    }, 2000);
                                                }

                                            }
                                        }else{
                                            self.$message.error(res.message)
                                        }
                                    }).catch(err => {
                                        console.log(err)
                                    })
                                }else{

                                    let newWindow = window.open()
                                    routeData = self.$router.resolve({
                                        name: "VirtualMachineManual",
                                        query: {
                                            courseId: self.coursesId,
                                            chapterId: id,
                                            isCourseDetail:true,
                                            classId:self.classId,
                                            stepTypeStr: self.stepTypeStr,
                                            singleChaper:self.singleChaper,
                                        }
                                    })
                                    // window.open(routeData.href, '_blank')
                                    newWindow.location.href = routeData.href
                                    // window.location.reload()
                                    setTimeout(() => {
                                        //self.InitCourseChapterList()
                                        self.InitCourseLearn()
                                    }, 2000);
                                }
                            }else{
                                self.$message.error(res.message)
                            }
                        }).catch(err => {
                            console.log(err)
                        })
                    }
                }else if(name == '随堂练习'){
                    console.log(8889);
                    let newWindow = window.open()
                    if(self.roles == 'STUDENT'){
                        if(self.userStatus=='NOT_CREATE_CLASS'){
                            self.typesStatus =1   //没有班级时传1  不显示提交按钮
                        }else{
                            self.typesStatus =2  //有班级时传2 显示提交按钮
                        }
                        let evalStlx = item2.otherInfo.find(itemstlx => itemstlx.type == 4);
                        routeData = self.$router.resolve({
                            name: "SPractice",
                            query: {
                                courseId: self.coursesId,
                                chapterId: id,
                                typesStatus:self.typesStatus,
                                classId:self.classId,
                                evaluatStatus:evalStlx.evaluatStatus,
                                singleChaper:that2.id
                            }
                        })
                    }else if(self.roles == 'TEACHER' || self.roles == 'MARKET_TEACHER' || self.roles == 'UNIVERSITY_TEACHER'){
                        routeData = self.$router.resolve({
                            name: "TPractice",
                            query: {
                                courseId: self.coursesId,
                                chapterId: id,
                                classId:self.classId,
                                singleChaper:that2.id
                            }
                        })
                    }
                    // window.open(routeData.href, '_blank')
                    newWindow.location.href = routeData.href
                    // window.location.reload()
                    setTimeout(() => {
                       // self.InitCourseChapterList()
                        self.InitCourseLearn()
                    }, 2000);
                }
                // self.$http.get('/tes/operation/chapter/'+self.VirtualSaveChapterId+'/studied').then(response => {
                //     let res = response.data
                //     if(res.code == '200'){

                //     }else{
                //         self.$message.error(res.message)
                //     }
                // }).catch(err => {
                //     console.log(err)
                // })

            }
        },
        // 确定跳转实验详情
        VirtualSave(){
            let self = this
            // self.dialogVirtual = true
            let newWindow = window.open()
            let routeData
            if(self.roles == 'TEACHER' || self.roles == 'MARKET_TEACHER' || self.roles == 'UNIVERSITY_TEACHER'){
                // 跳转实验页
                routeData = self.$router.resolve({
                    name: "VirtualMachine",
                    query: {
                        courseId: self.coursesId,
                        chapterId: self.VirtualSaveChapterId,
                        classId:self.classId,
                        stepTypeStr: self.stepTypeStr,
                        singleChaper:self.singleChaper,
                    }
                })
                // window.open(routeData.href, '_blank')
                newWindow.location.href = routeData.href
                // window.location.reload()
            }else if(self.roles == 'STUDENT'){
                routeData = self.$router.resolve({
                    name: "STVirtualMachine",
                    query: {
                        courseId: self.coursesId,
                        chapterId: self.VirtualSaveChapterId,
                        classId:self.classId,
                        stepTypeStr: self.stepTypeStr,
                        singleChaper: self.singleChaper
                    }
                })
                // window.open(routeData.href, '_blank')
                newWindow.location.href = routeData.href
                // window.location.reload()
            }

            self.dialogVirtual = false
            setTimeout(() => {
                //self.InitCourseChapterList()
                self.InitCourseLearn()
            }, 2000);
            // self.$http.get('/tes/operation/chapter/'+self.VirtualSaveChapterId+'/studied').then(response => {
            //     let res = response.data
            //     if(res.code == '200'){

            //     }else{
            //         self.$message.error(res.message)
            //     }
            // }).catch(err => {
            //     console.log(err)
            // })
        },
        // // 实验手册显示隐藏
        // displaySave() {
        //     let self = this
        //     self.$http.put('/tes/course/{id}/resource-all').then(response => {
        //         let res = response.data
        //         if(res.code == '200'){
        //             self.displayRadios = 1
        //         }else{
        //             self.$message.error(res.message)
        //         }
        //     }).catch(err => {
        //         console.log(err)
        //     })
        // },
        AddClass(){
            let self = this
            self.dialogAddClass = true
        },
        // 添加班级
        jumpClass(type) {
            // 二期更改
            // type 自定义类型 1.创作本课班级 2.关联系统班级
            let self = this
            if(type == 1){
                self.$router.push({ path: "/Teaching/AddClass" });
            }else{
                self.$router.push({ path: "/Teaching/AssociationClass" });
            }
        },
    },
}
</script>
<style scoped>
    .overflowName{
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 205px;
        display: inline-block;
    }
    .jx-course-collapse>>>.el-collapse-item__content{
        padding-bottom:0px;
    }
    .el-collapse-item>>>.el-collapse-item__header{
        height: auto;
        border: none;
        line-height: none;
        display: inline;
    }
    .el-collapse-item>>>.el-collapse-item__wrap{
        /* margin-top: 8px; */
        border:none;
    }
    .el-collapse-item>>>.el-collapse-item__arrow{
        position: absolute;
        right: 32px;
        top: 35px;
        font-size: 14px;
        color: #727272;
    }
    .tab{
        margin-bottom: 28px;
        margin-top: 28px;
        padding-left: 10px;
    }
    .tab  .actives{
        color: #1277eb;
        background: #d6e5f6;
    }
    .category{
        padding: 5px 10px;
        border-radius: 5px;
        cursor: pointer;
        margin-right: 10px;
    }
    .jx-course-target-top span{
        color: #1277eb;
        font-size: 16px;
    }
    .jx-course-target-top{
        margin-bottom: 8px;
    }
    .jx-course-target-bottom{
        line-height: 28px;
        color: #757575;
    }
</style>
<style>
    .dialog-virtual .el-dialog__footer{
        text-align: center;
    }

    .dialog-add-class .el-dialog .el-dialog__footer{
       padding: 0;
       padding-bottom: 60px;
    }
</style>
<style scoped lang="scss">
    @import "./../../../styles/ypublic.scss";
    $sideWidth:380px;
    $mainWidth:800px;
    $bg_ff:$white;
    $fontBlue:$blue;
    $fontGray:$title-gray;
    #jx-contain{
        //专科版本添加单元样式
        .collapsesleval{
            margin-top: -20px !important;
            box-shadow: 0 0 0 0!important;
            padding-bottom: 0 !important;
            .jx-titleText2{
                font-size: 14px;
                padding-left:60px;
                margin-right: 10px;
                &:hover{
                     color: #1277eb;

                }
                .jx-titleText2-span{
                    max-width: 400px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    display: inline-block
                }
                .icon-diannao-copy{
                    display: inline-block;
                    vertical-align: bottom;
                }
            }
        }
        width: $width;
        height: auto;
        // overflow: hidden;
        margin: 20px auto 0;
        background: $bg_f8;
        min-height: 1080px;
        .el-dialog__footer{
            .dialog-footer{
                .el-button {
                    width: 90px;
                }
            }
        }
        .jx-mainSection{
            width:$mainWidth;
            margin-right: 20px;
            height: auto;
            .jx-course-collapse{
                border: none;
                .jx-chapter-detail{
                    font-size: $fs14;
                    padding-left: 40px;
                    color: rgb(164, 164, 164);
                    line-height: 1.5;//yx修改
                    padding-right: 32px;
                    margin-top: 9px;
                    margin-bottom: 9px
                }
                .enter{
                    color: $table-gray;
                    font-size: 12px;
                    float: right;
                    cursor: pointer;
                    display: none;
                    margin-right: 15px;
                }
                .jx-chapter-info{
                    padding-left: 40px;
                    height: 36px;
                    line-height: 36px;
                    padding-right: 32px;
                    color: $table-gray;
                    cursor: pointer;
                    .dian{
                        width: 4px;
                        height: 4px;
                        border-radius: 3px;
                        background: $table-gray;
                        margin: 17px 23px 0 2px;
                    }

                    &:hover{
                        background: #f5f7fb;
                        color: $btn-blue;
                        .dian{
                            background: $btn-blue;
                        }
                        .enter{
                            display: block;
                            color: $btn-blue;
                        }
                    }
                }
                .el-collapse-item{
                    position: relative;
                    box-shadow: $boxShadow;
                    padding: 15px 0 10px;
                    background: $bg_ff;
                    margin-bottom: 20px;
                    transition: 1s;
                    // &:hover{
                    //     .jx-titleText{
                    //        color: #1277eb
                    //     }
                    // }
                }
                .collapseTemplate{
                    &:hover{
                        .jx-titleText{
                           color: #1277eb
                        }
                    }
                }

                .jx-title-box{
                    color:$fontBlue;
                    line-height: 20px;
                    text-align: left;
                    padding-right: 32px;
                    font-size: $fs16;
                    height: 20px;
                    padding-top: 15px;
                    .jx-blueStreak{
                        background: $fontBlue;
                        width: 2px;
                        float: left;
                        height: 18px;
                        padding: 0;
                    }
                    .jx-titleText{
                        max-width: 400px;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        padding-left:40px;
                        margin-right: 10px;
                    }
                    .jx-titleTip{
                        color: $btn-blue;
                        font-size: 12px;
                        margin-right: 45px;
                    }
                    .icon-diannao-copy{
                        color: #1277eb;
                    }
                    .icon-zhengque{
                        font-size: 12px;
                        color: #3fdb9b;
                    }

                }
            }
            .jx-course-name-detail{
                box-shadow: $boxShadow;
                padding: 28px 33px 23px 40px;
                margin-bottom: 20px;
                background: $white;
                .jx-course-name{
                    color: $fontBlue;
                    font-size: $fs16;
                    font-weight: bolder;
                    margin-bottom: 16px;
                }
                .jx-course-title{
                    font-size: 14px;
                    color: $btn-blue;
                    font-weight: normal;
                    cursor: pointer;
                    i{
                        margin-right: 5px;
                    }
                    &:hover{
                        color: #0b63c8

                    }
                }
                 .jx-course-content{
                    color: $table-gray;
                    font-size: $fs14;
                    line-height: $lh;
                    margin-bottom: 20px;
                }
                .jx-course-look{
                    font-size: 14px;
                    color: #385899;
                    cursor: pointer;
                    display: inline-block;
                    i{
                        margin-right: 5px;
                        vertical-align: -webkit-baseline-middle;
                    }
                    &:hover{
                        color: #1277eb;
                    }
                }
            }
        }
        .jx-sideSection{
            width:$sideWidth;
            font-size:$fs16;

            div{
                // width: 100%;  yx修改
                background: $bg_ff;
            }
            .jx-sideThree{
                padding: 28px 0 30px;
                margin-bottom: 18px;
                box-shadow: $boxShadow;
                border-radius: $br5;
                color: $table-gray;
                font-size: $fs16;
                .gray-line{
                    height: 1px;
                   // width: 322px;
                    background: $grayLine;
                    margin: 0 20px;
                    margin-top: 16px;
                    // margin: 0 0 14px 26px;
                }
                .jx-title-box{
                    color:$fontBlue;
                    line-height: 15px;
                    text-align: left;
                    height: 15px;
                    .jx-blueStreak{
                        background: $fontBlue;
                        width: 2px;
                        float: left;
                        height: 15px;
                        padding: 0;
                    }
                    .jx-titleText{
                        padding-left:$paddLeft;
                        width: auto;
                    }
                }
                .jx-course-detail{
                    padding: 22px 32px 0 26px;
                    margin-bottom: 28px;
                    width: auto;
                    line-height: $lh;
                }
                .jx-course-total,.jx-course-learned{
                    padding: 20px 32px 0 26px;
                    width: auto;
                    line-height: 1;
                    margin-bottom: 13px;
                }
                .jx-course-learned{
                    margin-bottom:30px;
                    font-size: 14px;
                    line-height: 21px;
                }
                $button-width:280px;
                $button-height:50px;
                $button-size:16px;
                .jx-recent-study{
                    width:  $button-width;
                    height:$button-height;
                    line-height: $button-height;
                    font-size: $button-size;
                    margin: 20px auto;
                    display: block;
                    border-radius: 25px;
                    // &.disabled{
                    //     border-color:
                    // }
                }
            }
            .jx-sideOne{
                height: 174px;
                padding-top: 26px;
                margin-bottom: 18px;
                box-shadow: $boxShadow;
                border-radius: $br5;
                box-sizing: border-box;
                &.student-sideOne{
                    height: 180px;
                    .jx-info-box{
                        .jx-teacherName{
                            width: 75%;
                            height: auto;
                            line-height: 1;
                            padding-top: 0;
                            p{
                                height: auto;
                                line-height: 1.5;
                                margin-bottom: 7px;
                            }

                            &.showEmail{
                                color: $fontGray;
                                font-size: $fs16;
                                width: 240px;
                                padding-left: 20px;
                                padding-top: 4px;
                                &>p{
                                    line-height: 28px;
                                    height: 28px;
                                    font-size: 14px;
                                    margin-bottom: 0;
                                }
                            }
                        }
                    }
                }
                .jx-title-box{
                    color:$fontBlue;
                    line-height: 15px;
                    text-align: left;
                    height: 15px;
                    .jx-blueStreak{
                        background: $fontBlue;
                        width: 2px;
                        float: left;
                        height: 15px;
                        padding: 0;
                    }
                    .jx-titleText{
                        padding-left:$paddLeft;
                        width: auto;
                    }
                }
                .jx-info-tips{
                    font-size: 16px;
                    line-height: 125px;
                    color: #385899;
                    text-align: center;
                }
                .jx-add-class{
                    text-align: center;
                    span{
                        font-size: 16px;
                        color: #385899;
                        display: block;
                        margin-top: 22px;
                    }
                    .button-style{
                        width: 280px;
                        height: 50px;
                        border-radius: 25px;
                        font-size: 28px;
                        border-style: dashed;
                        margin-top: 25px;
                    }
                }
                .jx-info-box{
                    height: 64px;
                    padding:0 0 25px 26px; //yx修改
                    margin-top: 30px;
                    width: auto;
                     .jx-teacherIcon{
                        height: 64px;
                        width: 64px;
                        border-radius: $br50;
                    }
                    .jx-teacherName{
                        color: $fontGray;
                        font-size: $fs16;
                        width: 240px;
                        // height: 64px;
                        // line-height: 64px;
                        padding-left: 20px;
                        padding-top: 4px;
                        &>p{
                            line-height: 28px;
                            height: 28px;
                            font-size: 14px;
                        }
                    }
                }
                .jx-class-manage{
                    .jx-class-name{
                        color: $fontBlue;
                        font-size:$fs16;
                        padding-left: $paddLeft;
                        width: 204px;
                        word-break: break-all;
                        margin-top: 8px;
                        margin-right: 35px;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }
                    $button-width:90px;
                    $button-height:32px;
                    .button-style{
                        width: $button-width;
                        height:$button-height;
                    }
                }
            }
            .jx-sideTwo{
                height: 317px;
                padding-top: 28px;
                margin-bottom: 18px;
                box-shadow: $boxShadow;
                border-radius: $br5;
                .jx-title-box{
                    color:$fontBlue;
                    line-height: 15px;
                    text-align: left;
                    height: 15px;
                    .jx-blueStreak{
                        background: $fontBlue;
                        width: 2px;
                        float: left;
                        height: 15px;
                        padding: 0;
                    }
                    .jx-titleText{
                        padding-left:$paddLeft;
                        width: auto;
                    }
                }
                .jx-class-chose{
                    margin: 18px 0 30px 0;
                    padding-left: $paddLeft;
                    width: auto;
                    i{
                        font-size: $fs14;
                        color: #385899;
                        margin-right: 18px;
                    }
                    .el-select{
                        width: auto;
                        line-height: 38px;
                        margin-right: 16px;
                    }
                    &:hover{
                        i{
                            cursor: pointer;
                        }
                    }
                }
                .jx-class-detail{
                    padding-left: $paddLeft;
                    font-size: $fs14;
                    color:$title-gray;
                    margin-bottom: 32px;
                    width: auto;
                    div{
                        margin-bottom: 14px;
                        height: 22px;
                        line-height: 22px;
                        &:hover{
                            .button-style{
                                display: inline-block;
                            }
                        }
                    }
                    .button-style{
                        height: 22px;
                        line-height: 22px;
                        margin-left: 8px;
                        display: none;
                    }
                }
                .jx-button-box{
                    padding-left: $paddLeft;
                    margin-bottom: 32px;
                    .jx-stu-attendance{
                        margin-right: 20px;
                    }
                }
                .icon-shujuduibi{
                    height: 16px;
                    line-height: 16px;
                    text-align: center;
                    width: 16px;
                    border:none;
                }
            }

        }
        .el-dialog__footer{
            text-align: center;
        }
        // 暂无数据提示
        .jx-mainSection-tip{
            width:$mainWidth;
            text-align: center;
            position: relative;
            box-shadow: $boxShadow;
            padding: 80px 0 50px;
            background: $bg_ff;
            margin-bottom: 20px;
            transition: 1s;
             &>p{
                margin: 30px 0;
                color: #9999;
                font-size: 16px
            }
        }
        //专科版本三级数据展示
        .jx-chapter-info2{
            padding-left: 80px;
            height: 36px;
            line-height: 36px;
            padding-right: 32px;
            color: $table-gray;
            cursor: pointer;
            background: #fbfbfb;

        .enter{
            color: $table-gray;
            font-size: 12px;
            float: right;
            cursor: pointer;
            display: none;
        }
        .dian{
            width: 4px;
            height: 4px;
            border-radius: 3px;
            background: $table-gray;
            margin: 17px 23px 0 2px;
            display: inline-block;
        }
        &:hover{
            background: #f5f7fb;
            color: $btn-blue;
            .dian{
                background: $btn-blue;
            }
            .enter{
                display: block;
                color: $btn-blue;
            }
        }
    }

    }
    // 实验手册显示隐藏弹窗样式
    .el-dialog{
        .el-dialog__footer{
            text-align: center;
        }
    }
    .dialog-handbook{
        .el-dialog__body{
            padding: 40px 20px 30px;
            .dialog-content{
                p{
                    font-size: 14px;
                    text-align: center;
                    line-height: 18px;
                    i{
                        font-size: 18px;
                        margin-right: 10px;
                        color: #1277eb;
                        vertical-align: -webkit-baseline-middle;
                    }
                }
                .handbook-item{
                    text-align: center;
                    margin-top: 30px;
                }
            }
        }
    }
    // 进入实验提示
    .dialog-virtual{
        .dialog-content{
            text-align: center;
            i{
                font-size: 50px;
                color: #d6d6d6;
                display: block;
                margin-top: 25px;
            }
            p{
                font-size: 14px;
                color: #727272;
            }
        }
    }
    .jx-title-box2{
        color:$fontBlue;
        line-height: 20px;
        text-align: left;
        padding-right: 32px;
        font-size: $fs16;
        padding: 12px 0;
        .jx-blueStreak{
            background: $fontBlue;
            width: 2px;
            float: left;
            height: 18px;
            padding: 0;
        }
        .jx-titleText{
            max-width: 400px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            padding-left:60px;
            margin-right: 10px;
        }
        .jx-chapter-detail2{
            font-size: $fs14;
            padding-left: 85px;
            color: rgb(165,164,164);
            line-height: 1.5;//yx修改
            padding-right: 32px;
            margin-top: 4px;
        }
        &:hover{
            background: #f5f7fb
        }
    }
    .jx-title-box3{
        margin-left: 30px;
        color: rgb(117, 117, 117);
        padding: 10px 0 10px 30px;
    }
    .intnet{
        color: #1277eb;
        font-size: 14px;
        display: inline-block;
        vertical-align: text-bottom;
    }
    .taskName{
        margin-right: 5px;
        display: inline-block;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        max-width: 300px;
        font-size: 14px;
    }
    .icon-42{
        font-size: 12px;
        margin-right: 14px;
        display: inline-block;
        vertical-align: text-bottom;
        margin-left: 1px;
    }
    .evaluat{
        vertical-align: top;
    }
    .icon-tubiaozhizuomoban1{
        font-size: 18px;
        color: #1277eb;
    }


    .statistics .iconfont{
        outline: 0;
    }
</style>
